<!DOCTYPE html>
<html lang="en">
<head>
    <!--meta元信息，charset字符集，utf-8中文-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>永和小票</title>
    <!--样式设计-->
    <style>
        body{/*对整个页面进行样式修饰*/
            width: 300px;
            font-size: 8px;/*字体大小*/
        }
        .please{
            font-size: 20px;
            font-weight: bold;/*加粗*/
        }
        .self{
            /*padding修饰四周 上右下左（顺时针一圈4个值,空*/
            padding-left:80px ;/*左边空一定距离*/
        }
        /*solid实线 dashed 虚线*/
        hr{
            border: 1px dashed;
        }
        .note{
            /* padding-top: 20px; 上空
            padding-bottom: 15px;  下空*/
            /* padding: 20px 0px 15px 0px; 上右下左*/
            margin-top: 20px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <!--div标签会自动换行 span不换行：块，实现页面布局-->
    <div>顾客联</div>
    <div class="please">请您留言取餐账单号</div>
    <div class="self">自取顾客联</div>
    <div>永和大王（北三环西路店）</div>
    <div>010-123456</div>
    <div class="self">--结账单--</div>
    <div class="please">账单号：P000010</div>
    <div>账单类型：堂食</div>
    <div>人数：1</div>
    <div>收银员：张静</div>
    <div>开单时间：2020-05-18 15：24：29</div>
    <div>结单时间：2020-05-18 15：25：10</div>
    <hr style="border: 1px dashed;">
    <!--
        表格是没有列概念，他叫做单元格
        页面中换行会被解析一个空格
        align横向排列：left居左、center居中、right居右
        valign纵向排列：top居上、center居中、bottom居下
    -->
    <table>
        <tr>
            <td width="50" align="left">数量</td>
            <td width="190">品项</td>
            <td width="50" align="right">金额</td>
        </tr>
        <tr>
            <td valign="top">1</td>
            <td>玉米肉松蛋饼2P<br>
                1 X--玉米肉松蛋饼<br>
                1 X--现磨豆浆（热/甜）
            </td>
            <td align="right" valign="top">8.00</td>
        </tr>
    </table>
    <hr style="border: 1px dashed;">
    <table>
        <tr>
            <td width="246">合计</td>
            <td width="50" align="right">8.00</td>
        </tr>
        <tr>
            <td>微支付</td>
            <td align="right">8.00</td>
        </tr>
    </table>
    <div>打印时间：2020-05-18 15：25：10</div>
    <hr style="border: 1px dashed;">
    <!--&nbsp;代表一个空格，7个空格等价于2个汉字距离-->
    <div class="note">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期， 如您需要当日的电子发票请务必在消费当日通过扫描下方二维码， 根据指引步骤开具您的增值税电子普通发票。 此二维码30天有效，扫描时请保持小票平整</div>
    <div style="padding-left: 50px;"><img src="images/qr.png" width="150"/></div> 
    <div>官网：</div>
    <div>加盟热线：</div>

</body>
</html>